<template>
	<view class="bg">
		<view class="container">
			<view class="head" @click="handleToNav('/pages/mine/info/index')">
				<view class="user-info">
					<image class="portrait" :src="userDetail.avatar" mode="aspectFit"></image>
					<view class="user-info-item">
						<view class="username">{{ userDetail.nickname }}</view>
						<view class="phone">{{ userDetail.phone }}</view>
					</view>
				</view>
				<uni-icons type="forward" color="#ffffff" size="19"></uni-icons>
			</view>

			<view class="data-item">
				<uni-grid column="3" :show-border="false" :square="false" align="middle" justify="center">
					<uni-grid-item>
						<view class="grid-item-box">
							<view class="num">{{ userDetail.balance }}</view>
							<view class="text">我的余额</view>
						</view>
					</uni-grid-item>
					<uni-grid-item @click.native="handleTips">
						<view class="grid-item-box center">
							<div class="separator"></div>
							<view class="box">
								<view class="num">{{ userDetail.credit }}</view>
								<view class="text">我的积分</view>
							</view>
							<div class="separator"></div>
						</view>
					</uni-grid-item>
					<!-- <uni-grid-item @click.native="handleToNav('/pages/mine/discount-card/index')"> -->
					<uni-grid-item @click.native="handleTips">
						<view class="grid-item-box">
							<view class="num">{{ userDetail.couponNum || 0 }}</view>
							<view class="text">折扣卡</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>

			<view class="card" v-if="userDetail.vipTypeInfo" :class="vipType">
				<!-- userDetail.vipTypeId -->
				<image class="mine-bg" :src="`../../static/images/mine/mine-bg${userDetail.vipTypeId}@2x.png`" mode="aspectFit"></image>
				<div class="card-box">
					<image class="icon-current" :src="`../../static/images/mine/icon-current${userDetail.vipTypeId}@2x.png`" mode="aspectFit"></image>
					<div class="vip-type">{{ userDetail.vipTypeName }}</div>

					<div class="recharge-progress">
						<div class="left">
							<div class="recharge">
								<div class="label">已充值：</div>
								<div class="num">{{ userDetail.vipTypeInfo.nowValue }}</div>
								<div class="unit">元</div>
							</div>
							<!-- 进度 -->
							<!-- 根据开关显示隐藏 -->
							<template v-if="userDetail.isShowProgress === 1">
								<div class="progress">
									<div class="progress-box">
										<div class="progress-percent" :style="{ width: userDetail.vipTypeInfo.progressRate + '%' }"></div>
									</div>
									<div class="progress-value">{{ userDetail.vipTypeInfo.progressRate }}%</div>
								</div>
							</template>
							<!-- 根据开关显示隐藏 -->
							<template v-if="userDetail.isShowProgressDesc === 1">
								<div class="progress-tips" v-if="userDetail.vipTypeId === 6">已升至最高等级，更多折扣面议</div>
								<div class="progress-tips" v-else>
									再充值
									<div class="num">{{ userDetail.vipTypeInfo.gapValue }}元</div>
									即可升为
									<div class="num">{{ userDetail.vipTypeInfo.nextName }}</div>
								</div>
							</template>
						</div>
						<div class="right" v-if="userDetail.vipTypeId !== 6">
							<div @click="handleToNav('/pages/recharge/index')" class="recharge-link">去充值</div>
						</div>
					</div>
					<!-- 工具 -->
					<div class="tool">
						<div class="title">常用功能</div>
						<div class="divide"></div>
						<div class="tool-box">
							<!-- <div class="item" @click="handleToNav('/pages/mine/membership/index')">
								<image class="icon" src="../../static/images/mine/icon-tool1@2x.png" mode=""></image>
								<div class="text">会员权益</div>
							</div> -->
							<div class="item" @click="handleToNav('/pages/mine/consumption-history/index')">
								<image class="icon" src="../../static/images/mine/icon-tool2@2x.png" mode=""></image>
								<div class="text">消费记录</div>
							</div>
							<!-- <div class="item" @click="handleToNav('/pagesA/exchange/index')">
								<image class="icon" src="../../static/images/mine/icon-tool3@2x.png" mode=""></image>
								<div class="text">兑换记录</div>
							</div> -->
							<!-- <div class="item" @click="handleToNav('/pagesA/record/index')">
								<image class="icon" src="../../static/images/mine/icon-tool4@2x.png" mode=""></image>
								<div class="text">积分明细</div>
							</div> -->
							<!-- <div class="item" @click.native="handleToNav('/pages/mine/discount-card/index')">
								<image class="icon" src="../../static/images/mine/icon-tool5@2x.png" mode=""></image>
								<div class="text">折扣卡</div>
							</div> -->
							<div class="item" @click.native="handelToCall()">
								<image class="icon" src="../../static/images/mine/icon-tool6@2x.png" mode=""></image>
								<div class="text">客服热线</div>
							</div>
						</div>
					</div>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
import { memberDetail } from '@/api/member.js';
import { shopDetail } from '@/api/shop.js';

export default {
	data() {
		return {
			userDetail: {
				isShowProgress: 1,
				isShowProgressDesc: 1
			},
			comDetail: {}
		};
	},
	onShow() {
		this.getMemberDetail();
		this.getShopDetail();
	},
	computed: {
		vipType() {
			return 'vip' + this.userDetail.vipTypeId;
		}
	},
	methods: {
		getMemberDetail() {
			memberDetail().then((res) => {
				this.userDetail = Object.assign(this.userDetail, res.data);
			});
		},
		getShopDetail() {
			shopDetail().then((res) => {
				this.comDetail = res.data;
			});
		},
		handleToNav(page) {
			this.$tab.navigateTo(page);
		},
		handelToCall() {
			uni.makePhoneCall({
				phoneNumber: this.comDetail.shopTel
			});
		},
		handleHelp() {
			this.$tab.navigateTo('/pages/mine/help/index');
		},
		handleAbout() {
			this.$tab.navigateTo('/pages/mine/about/index');
		},
		handleJiaoLiuQun() {
			this.$modal.showToast('...');
		},
		handleBuilding() {},
		handleTips() {
			this.$modal.showToast('开发中，敬请期待！');
		}
	}
};
</script>

<style lang="scss">
.bg {
	min-height: 100vh;
	background: #fff;
}

.container {
	padding: 24rpx 0 0;
	padding-top: 0;
	line-height: inherit;
	background: linear-gradient(180deg, #1e60ff 0%, rgba(30, 96, 255, 0) 100%);
	background-size: 100% 416rpx;
	background-repeat: no-repeat;
	width: 100%;
	background-attachment: fixed;

	.head {
		padding: 0 48rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.user-info {
			display: flex;
			align-items: center;

			.portrait {
				margin-right: 24rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
			}

			&-item {
				display: flex;
				flex-direction: column;

				.username {
					font-size: 36rpx;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 800;
					color: #ffffff;
				}

				.phone {
					margin-top: 12rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}
	}

	.data-item {
		margin: 0 24rpx;
		height: 176rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(238, 238, 238, 0.5);
		border-radius: 24rpx;

		.uni-grid-wrap {
			justify-content: center;
			height: 100%;
		}

		.grid-item-box {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			height: 100%;

			&.center {
				justify-content: space-between;
				flex-direction: row;

				.box {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}
			}

			.num {
				font-size: 45rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #111111;
				line-height: 56rpx;
			}

			.text {
				margin-top: 4rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}

			.separator {
				width: 2rpx;
				height: 48rpx;
				background-color: #ccc;
			}
		}
	}

	.card {
		position: relative;
		width: 734rpx;
		height: 906rpx;
		margin: 24rpx auto 0;

		&.vip2 {
			.card-box {
				.vip-type {
					color: #c17a31;
				}

				.recharge-progress {
					.left {
						.recharge {
							color: #c17a31;
						}

						.progress .progress-box {
							background: #cf8a43;
							box-shadow: inset 0rpx 2rpx 6rpx 0rpx rgba(180, 111, 4, 0.5);
						}

						.progress .progress-box .progress-percent {
							background: linear-gradient(90deg, #ffdfbf 0%, #ffffff 100%);
							box-shadow: 4rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);
						}

						.progress .progress-value {
							color: #c17a31;
						}

						.progress-tips {
							color: #c17a31;

							.num {
								color: #ffed82;
							}
						}
					}

					.right .recharge-link {
						background: linear-gradient(72deg, #ffe1b0 0%, #ffa217 100%);
						border-radius: 40rpx 0rpx 0rpx 40rpx;
						border: 2rpx solid linear-gradient(75deg, #fdc851, #ffa03f) 2 2;
						// border-image: linear-gradient(75deg, rgba(253, 200, 81, 1), rgba(255, 160, 63, 1)) 2 2;
					}
				}
			}
		}

		&.vip3 {
			.card-box {
				.vip-type {
					color: #59719c;
				}

				.recharge-progress {
					.left {
						.recharge {
							color: #59719c;
						}

						.progress .progress-box {
							background: #95a6c5;
							box-shadow: inset 0rpx 2rpx 6rpx 0rpx rgba(89, 113, 156, 0.5);
						}

						.progress .progress-box .progress-percent {
							background: linear-gradient(90deg, #b2fcff 0%, #ffffff 100%);
							box-shadow: 4rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);
						}

						.progress .progress-value {
							color: #59719c;
						}

						.progress-tips {
							color: #59719c;

							.num {
								color: #e0feff;
							}
						}
					}

					.right .recharge-link {
						background: linear-gradient(146deg, #b3d5fe 0%, #6888c6 100%);
						border: 2rpx solid linear-gradient(126deg, rgba(193, 207, 235, 1), rgba(115, 138, 171, 1)) 2 2;
					}
				}
			}
		}

		&.vip4 {
			.card-box {
				.vip-type {
					color: #d1840b;
				}

				.recharge-progress {
					.left {
						.recharge {
							color: #d1840b;
						}

						.progress .progress-box {
							background: #d1840b;
							box-shadow: inset 0rpx 2rpx 6rpx 0rpx rgba(209, 133, 11, 0.5);
						}

						.progress .progress-box .progress-percent {
							background: linear-gradient(90deg, #fffcb9 0%, #ffffff 100%);
							box-shadow: 4px 0px 6px 0px rgba(255, 255, 255, 0.5);
						}

						.progress .progress-value {
							color: #d1840b;
						}

						.progress-tips {
							color: #d1840b;

							.num {
								color: #e0feff;
							}
						}
					}

					.right .recharge-link {
						background: linear-gradient(146deg, #05f59d 0%, #d1b009 100%);
						border: 2rpx solid linear-gradient(126deg, #09e29a, #92d100) 2 2;
					}
				}
			}
		}

		&.vip5 {
			.card-box {
				.vip-type {
					color: #1e60ff;
				}

				.recharge-progress {
					.left {
						.recharge {
							color: #1e60ff;
						}

						.progress .progress-box {
							background: #1e60ff;
							box-shadow: inset 0rpx 2rpx 6rpx 0rpx rgba(209, 133, 11, 0.5);
						}

						.progress .progress-box .progress-percent {
							background: linear-gradient(90deg, #b2fcff 0%, #ffffff 100%);
							box-shadow: 4px 0px 6px 0px rgba(255, 255, 255, 0.5);
						}

						.progress .progress-value {
							color: #1e60ff;
						}

						.progress-tips {
							color: #1e60ff;

							.num {
								color: #1e60ff;
							}
						}
					}

					.right .recharge-link {
						background: linear-gradient(146deg, #b3d5fe 0%, #1c1fff 100%);
						border: 2rpx solid linear-gradient(126deg, rgba(193, 207, 235, 1), rgba(115, 138, 171, 1)) 2 2;
					}
				}
			}
		}

		&.vip6 {
			.card-box {
				.vip-type {
					color: #866eda;
				}

				.recharge-progress {
					.left {
						.recharge {
							color: #866eda;
						}

						.progress .progress-box {
							background: #866eda;
							box-shadow: inset 0rpx 2rpx 6rpx 0rpx rgba(209, 133, 11, 0.5);
						}

						.progress .progress-box .progress-percent {
							background: linear-gradient(90deg, #c1ccff 0%, #ffffff 100%);
							box-shadow: 4px 0px 6px 0px rgba(255, 255, 255, 0.5);
						}

						.progress .progress-value {
							color: #866eda;
						}

						.progress-tips {
							color: #866eda;

							.num {
								color: #866eda;
							}
						}
					}

					.right .recharge-link {
						background: linear-gradient(146deg, #b3d5fe 0%, #1c1fff 100%);
						border: 2rpx solid linear-gradient(126deg, rgba(193, 207, 235, 1), rgba(115, 138, 171, 1)) 2 2;
					}
				}
			}
		}

		.mine-bg {
			display: block;
			width: 734rpx;
			height: 906rpx;
		}

		.card-box {
			position: absolute;
			// width: 734rpx;
			height: 906rpx;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			margin-left: 50rpx;
			z-index: 1;

			.icon-current {
				position: relative;
				left: -50rpx;
				margin-left: 18rpx;
				width: 168rpx;
				height: 72rpx;
			}

			.vip-type {
				margin-top: 4rpx;
				font-size: 48rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #40729f;
			}

			.recharge-progress {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				height: 168rpx;

				.left {
					.recharge {
						margin: 44rpx 0 16rpx;
						display: flex;
						align-items: flex-end;
						color: #40729f;

						.label {
							font-size: 24rpx;
							font-family: PingFang-SC-Medium, PingFang-SC;
							font-weight: 500;
						}

						.num {
							margin-right: 4rpx;
							font-size: 40rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							line-height: 1;
						}

						.unit {
							font-size: 24rpx;
							font-family: PingFang-SC-Medium, PingFang-SC;
							font-weight: 500;
						}
					}

					.progress {
						display: flex;
						align-items: center;

						.progress-box {
							position: relative;
							margin-right: 8rpx;
							width: 280rpx;
							height: 20rpx;
							background: #a4c9e8;
							box-shadow: inset 0rpx 2rpx 6rpx 0rpx #7da8cc;
							border-radius: 10rpx;

							.progress-percent {
								height: 20rpx;
								position: absolute;
								top: 0;
								left: 0;
								bottom: 0;
								background: linear-gradient(90deg, #b2fcff 0%, #ffffff 100%);
								box-shadow: 4rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);
								border-radius: 10rpx;
							}
						}

						.progress-value {
							font-size: 24rpx;
							font-family: PingFang-SC-Medium, PingFang-SC;
							font-weight: 600;
							color: #59719c;
							line-height: 1;
						}
					}

					.progress-tips {
						display: flex;
						margin-top: 12rpx;
						font-size: 24rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #40729f;

						.num {
							font-weight: 600;
							font-size: 32rpx;
							color: #1e60ff;
							line-height: 1;
						}
					}
				}

				.right {
					margin-right: 18rpx;

					.recharge-link {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: -1rpx;
						width: 136rpx;
						height: 60rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #ffffff;
						background: linear-gradient(72deg, #c0e4ff 0%, #5796cf 100%);
						border-radius: 40rpx 0rpx 0rpx 40rpx;
						border: 2rpx solid linear-gradient(75deg, #a3c8e9, #82c1fa) 2 2;
						line-height: 1;
					}
				}
			}

			.tool {
				margin-top: 80rpx;

				.title {
					margin-right: 56rpx;
					height: 56rpx;
					font-size: 40rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;
					text-align: center;
					line-height: 1;
				}

				.divide {
					position: relative;
					right: 28rpx;
					margin: 0 auto;
					padding-right: 50rpx;
					margin-top: 8rpx;
					width: 176rpx;
					height: 4rpx;
					background: #111111;
					border-radius: 100%;
				}

				.tool-box {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 40rpx;

					.item {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						margin-right: 59rpx;
						margin-bottom: 30rpx;

						&.item:nth-child(4n) {
							margin-right: 0;
						}

						.icon {
							display: block;
							width: 116rpx;
							height: 116rpx;
						}

						.text {
							margin-top: 14rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #111111;
							line-height: 1;
						}
					}
				}
			}
		}
	}
}
</style>
